@charset "utf-8";
@mixin img(){
    width: 100%;
    height: 100%;
}
#web{
    width:100%;
    min-width: 1000px;
}

header{
    a:hover{
        text-decoration: none;
    }
    width: 100%;
    height: 73px;
    border-bottom: 1px solid #dfdfdf;
    .logo{
        width: 13.3%;
        div{
            width: 48px;
            height: 55px;
            overflow: hidden;
            margin-left: 21px;
            margin-top: 7px;
            img{
                @include img();
            }
        }
    }
    .navbar
    {
        width: 49.1%;
        margin-left: 4%;
        li{
            width: 16.667%;
            float: left;
            line-height: 73px;
            text-align: center;
            cursor: pointer;
            font-size: 15px;
            a{
                color: #444f58;
                width: 100%;
                height: 100%;
                display: inline-block;
            }
            &:hover{
                background: #ccc;
            }
        }
        li:nth-child(2),li:nth-child(6){
            position: relative;
            &:hover{
                .header-info{
                    display: block;
                }
            }
            .header-info{
                div{
                    border-right:1px solid #efefef;
                    width: 49.9%;
                    text-align: center;
                    margin-top: 23px;
                }
                div:nth-child(2){
                    border: none;
                }
                width: 640px;
                height: 340px;
                box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
                display: none;
                z-index: 1000;
                position: absolute;
                top: 74px;
                left: 0;
                background: white;
                box-sizing: border-box;
                overflow: hidden;
                white-space: nowrap;
                h4{
                    font-size: 15px;
                    color: #444f58;
                    line-height: 35px;
                    text-align: left;
                    padding-left: 66px;
                }
                ul{
                    width: 89px;
                    height: 240px;
                    margin-left: 35px;
                    li{
                        width: 100%;
                        text-align: left;
                        float: none;
                        line-height: 27px;
                        margin-bottom: 13px;
                        a{
                            font-size:13px !important;
                            color: #878787 !important;
                        }
                        &:hover{
                            background: none;
                            a{
                                text-decoration: underline;
                            }
                        }
                    }
                }
                ul:nth-of-type(1){
                    margin-left: 66px;
                }
            }
        }
    }
    .nav-img{
        width: 33.6%;
        li{
            width: 14%;
            height: 73px;
            float: left;
            border-right:1px solid #dfdfdf ;
            position: relative;
            span{
                font-size: 10.34px;
                color: #5e5e5e;
                line-height: 73px;
                text-align: center;
            }
            div{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
        }
        li:nth-child(1){
            width: 48% !important;
            .search{
                width: 76%;
                margin-top:25px ;
                input[type="search"]{
                    border-radius: 11px;
                    width: 100%;
                    height: 26px;
                    border:1px solid #dcdee0;
                    text-indent: 10px;;
                }
                input[type="image"]{
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }
        li:nth-child(2):hover,li:nth-child(3):hover{
            background: #ccc;
            cursor: pointer;
        }
        li:last-child{
            width: 8.7% !important;
            border: none;
        }
        .shop_car{
            width:14px;
            height: 14px;
            overflow: hidden;
            img{
                @include img();
                vertical-align: top;
            }
        }
        .per{
            position: relative;
            &:hover{
                .lo{
                    display: block;
                }
            }
            .lo{
                display: none;
                width: 100%;
                height: 120px;
                background: white;
                z-index: 999;
                position: absolute;
                top:194px;
                left: 0 !important;

                p{
                    width: 100%;
                    height: 40px;
                    font-size: 14px;
                    text-align: center;
                    cursor: pointer;
                    a{
                        color: #999;
                        line-height: 40px;
                    }
                    &:hover{
                        background: #ccc;
                        a{
                            color: white;
                        }
                    }
                }
            }
        }
        .person{
            width: 12px;
            height: 14px;
            overflow: hidden;
            img{
                @include img();
            }
        }
        .language{
            width:21px ;
            height:19px;
            overflow: hidden;
            img{
                @include img();
            }
        }
        .tel{
            width: 100%;
            height: 100%;
            overflow: hidden;
            img{
                @include img();
                transition: all 1s;
                &:hover{
                    transform: scale(1.1);
                    transition: all 1s;
                }
            }
        }
        .QQ{
            width: 61px;
            height: 14px;
            a{
                display: inline-block;
                width: 48px;
                height: 14px;
                font-size: 10px;
                color:#898989;
            }
        }
    }
}
footer{
    height: 250px;
    width: 100%;
    background: #eb413d;
    .list{
        width: 581px;
        margin: 0 auto;
        padding-top:55px ;
       .foot-logo{
        width: 86px;
        height: 32px;
        margin-right: 46px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            }
        }
        .foot-list{
            width: 448px;
            border-left:1px solid rgba(255,255,255,0.5) ;
            div{
                float: left;
                ul{
                    li{
                        color: #fff;
                        width: 56px;
                        list-style: square;
                        font-size: 11.5px;
                        margin-left: 56px;
                        a{
                            color: #fff;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
     p{
         font-size: 10px;
         text-align: center;
         color: white;
         padding-top: 65px;
     }
}
.nav-bottom{
    p{
        a{
            color: #444f58;
        }
    }
}
